<template>
  <div class="google-container" v-show="isLoading">
    <h1>
      <!-- 循环渲染字母 -->
      <span v-for="(char, index) in letters" :key="index" :style="{ color: colors[index] }">
        {{ char }}
      </span>
    </h1>
    <div class="wave-loader">
      <span v-for="i in 5" :key="i"></span>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref,computed,watch } from 'vue';
import { useLoadingStore } from '../stores/loading';

const loadingStore = useLoadingStore();
const isLoading = ref(false);
const currentLoading = computed(() => loadingStore.isLoading);
watch(currentLoading, (newValue) => {
if (newValue) {
  isLoading.value = true;
} else {
  setTimeout(() => {
    isLoading.value = false;
  }, 1000); // 可以调整为 1000 毫秒
}
});
// 定义显示的字母数组
const letters = ref(['B', 'u', 'D', 'i', 'u']);
// 定义每个字母对应的颜色数组
const colors = ref(['#4285F4', '#DB4437', '#F4B400', '#4285F4', '#0F9D58']);
</script>

<style scoped>
.google-container {
position: fixed; /* 固定定位，相对于浏览器窗口 */
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: white; /* 可根据需要设置背景颜色 */
opacity: 0.7;
z-index: 9999;
}

h1 {
font-family: 'Montserrat', sans-serif;
font-size: 4em;
text-align: center;
letter-spacing: -8px;
margin-top: 0;
}

.wave-loader {
display: flex;
justify-content: center;
align-items: center;
}

.wave-loader span {
display: inline-block;
width: 8px;
height: 25px;
margin: 0 3px;
background-color: #4285F4;
animation: wave 1s ease-in-out infinite;
}

.wave-loader span:nth-child(2) {
animation-delay: 0.1s;
}

.wave-loader span:nth-child(3) {
animation-delay: 0.2s;
}

.wave-loader span:nth-child(4) {
animation-delay: 0.3s;
}

.wave-loader span:nth-child(5) {
animation-delay: 0.4s;
}

@keyframes wave {
0%, 40%, 100% {
  transform: scaleY(0.4);
}
20% {
  transform: scaleY(1);
}
}
</style>